<template>
	<view class="padding0-30">
		<!-- 搜索栏 -->
		<view class="example-body">
			<uni-nav-bar :fixed="false" :border="false" :shadow="false" color="#333333" background-color="#fafafa" @clickLeft="showCity" >
				<block slot="left">
					<view class="city">
						<uni-icons type="location-filled" color="#333333" size="16" />
						<text class="uni-nav-bar-text">{{ city }}</text>
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="16" color="#666666" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
				</view>
			</uni-nav-bar>
		</view>
		
		<!-- 轮播 -->
		<view class="lunbo">
		    <view class="page-section swiper">
		        <view class="page-section-spacing">
		            <swiper class="swiper sw-box" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		                <swiper-item v-for="(item,i) in Img" v-bind:key="i">
							<image :src="item.url" class="lunbo-img"></image>
		                    <!-- <view class="swiper-item uni-bg-red">{{item.url}}</view> -->
		                </swiper-item>
		            </swiper>
		        </view>
		    </view>
		</view>
		
		<!-- 项目导航 -->
		<!-- 
		<view class="grid">
			<uniGrid :type="oblong" :showBorder="true" :columnNum="3" :options="list"></uniGrid>
		</view>  
		-->
		<!-- 项目导航 -->
		<view class="box">
			<swiper class="grid-swiper-box" @change="change">
				<swiper-item v-for="(item,i) in Math.ceil(list.length/8)" v-bind:key="i">
					<uniGrid :type="'square'" :showBorder="false" :columnNum="4" :options="listTemp"></uniGrid>
				</swiper-item>
			</swiper>
			<swiper-dot class="dot" :current="current" :list="Math.ceil(list.length/8)"></swiper-dot>
		</view>
		
		<view class="box search-nav-bar">
			<view @click="navigateTo" class="item s-item-1">找医院</view>
			<view class="item s-item-2">找医生</view>
			<view class="item s-item-3">找项目</view>
		</view>
		
		<!-- 推荐 -->
		<view>
			<recommend></recommend>
		</view>
	</view>
</template>

<script>
	import recommend from '@/pages/index/recommend.vue'
	import {mapActions} from "vuex";
	import uniGrid from "@/components/uni-grid/uni-grid.vue";
	import swiperDot from '@/components/swiper-dot/swiper-dot.vue';
	// import uni-nav-bar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components:{
			uniGrid,
			swiperDot,
			recommend
			// uni-nav-bar
		},
		data() {
			return {
				menu:[{text:"老客户"}],
				
				city: '北京',
				
				//轮播
				 background: ['color1', 'color2', 'color3'],
				 indicatorDots: true, //是否显示面板指示点
				 indicatorColor: 'rgba(255, 255, 255, 1.0)', //指示点颜色
				 indicatorActiveColor: '#f58a8a',//当前选中指示点颜色
				 autoplay: true,
				 interval: 3000,
				 duration: 500,
				 
				 Img:[
					 {name:'',url:require('../../static/img/lunbo/0.png')},
					 {name:'',url:require('../../static/img/lunbo/1.jpg')},
					 {name:'',url:require('../../static/img/lunbo/2.jpg')},
				 ],
				 
				 list: [
					 {
				 		image: '/static/img/bl.png',
				 		text: '全部项目',
				 		seize: false,
				 	},
				 	{
				 		image: '/static/img/bl.png',
				 		text: '手术美容',
				 		seize: false,
				 	},
					{
						image: '/static/img/bl.png',
						text: '注射美容',
						seize: false,
					},
					{
						image: '/static/img/bl.png',
						text: '皮肤美容',
						seize: false,
					},
					{
						image: '/static/img/bl.png',
						text: '中医美容',
						seize: false,
					},
					{
						image: '/static/img/bl.png',
						text: '毛发种植',
						seize: false,
					},
					{
						image: '/static/img/bl.png',
						text: '私密美容',
						seize: false,
					},
					{
						image: '/static/img/bl.png',
						text: '私密美容1',
						seize: false,
					},
					{
						image: '/static/img/bl.png',
						text: '私密美容2',
						seize: false,
					},
				 ],
				 current:0,
				 listTemp:[]
			}
		},
		onLoad() {
			// this.getAccessCode().then(res => {})
			this.listTemp=this.list.slice(0,this.list.length>8?8:this.list.length)
		},
		onShow() {
			// const _this=this,
			uni.getStorage({
				key:'locationCity',
				success: (res) => {
					this.city=res.data
				}
			})
			
			uni.getLocation({
				success: (res) => {
					console.log(res.data)
					console.log("res.data")
				}
			})
		},
		methods: {
			navigateTo(){
				uni.navigateTo({
					url:'/pages/pics/pics'
				})
			},
			// ...mapActions(["getAccessCode"]),
			handleClick(e){
				console.log(e)
				switch (e.index){
					case 1:
					this.$store.state.common.item = null
						uni.navigateTo({
							url:"/pages/oldClient/oldClient"
						})
						break;
					default:
						break;
				}
			},
			
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {
			
				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {
				uni.navigateTo({
					url:'/pages/select-city/select-city'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			},
			
			change(e) {
				let page=e.detail.current
				this.current = e.detail.current;
				this.listTemp=this.list.slice(page*8,(page+1)*8)
			}
			
		},
	}
</script>

<style lang="scss">
	.idex image{
		width: 700upx;
		margin-left: 25upx;
		// height: 150upx;
		background-color: #1F9DD8;
	}
	.page-index{
		padding-top: 100upx;
		background: url(../../static/img/333.jpg) #0848a4 no-repeat 0% 0%;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}
	.lunbo{
		border-radius: $uni-border-radius-xlg;
		overflow: hidden;
		// border: 1px solid red;
		.sw-box{
			height: 320rpx;
			.lunbo-img{
				width: 100%;
				height: 100%;
				border-radius: $uni-border-radius-xlg;
			}
		}
	}
	
	//导航栏
	.box{
		position: relative;
		margin-top: 10px;
		border: 1px solid #f8f8f8;
		border-radius: $uni-border-radius-xlg;
		background-color: #fff;
		overflow: hidden;
	}
	
	.grid-swiper-box{
		height: 366rpx;
	}
	.dot {
		position: absolute;
		bottom: 15px;
		left: 50%;
		transform: translate(-50%);
	}
	
	.search-nav-bar{
		display: flex;
		padding: 20rpx;
		.item{
			width: 146rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin: 0 10rpx;
			padding: 30rpx;
		}
		.s-item-1{background-color: #fff3f5;}
		.s-item-2{background-color: #f0f7ff;}
		.s-item-3{background-color: #fffaec;}
	}
	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		 width: 520rpx;
		 height: 30px;
		flex: 1;
		background-color: #fff;//#f8f8f8
		
		border-radius: 15px;
		padding: 0 5px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
		// border: 1px solid red;
	}
	
</style>
